<template>
  <div class="app-container initializeRoll">
    <div class="topDiv" style="padding: 0 10px">
      <p class="title">
        <img src="../../../assets/images/wtb4.png" alt />
        <span>用户数据</span>
      </p>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row gutter="15">
        <el-col :span="6">
          <el-form-item label="码名称" prop="field102">
            <el-input size="small" v-model="formData.field102" placeholder="请输入码名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="码系统ID" prop="field103">
            <el-input size="small" v-model="formData.field103" placeholder="请输入码系统ID" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="码标识" prop="field104">
            <el-input size="small" v-model="formData.field104" placeholder="请输入码标识" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="码归属" prop="field105">
            <el-input size="small" v-model="formData.field105" placeholder="请输入码归属" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button size="small" type="primary" @click="submitForm">提交</el-button>
        <el-button size="small" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>



    
      <div style="margin-top: 40px">
        <el-tabs v-model="activeName" @tab-click="handleClick1">
          <el-tab-pane label="码汇总数据" name="0">
            <!-- <el-button
              size="mini"
              round
              type="primary"
              icon="el-icon-download"
              @click="CommissionExport"
              style="margin-bottom: 10px"
              >导出</el-button
            > -->
            <el-table :data="roleList" id="dataTable">
              <el-table-column label="展业日期" align="center" prop="proTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.proTime || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="系统ID"
                prop="proName"
                :show-overflow-tooltip="true"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="识别名称"
                prop="fromUserName"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="识别号"
                align="center"
                prop="toUserAccount"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserAccount || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="数据条数"
                align="center"
                prop="toUserName"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="判断结果汇总" align="center" prop="amount">
                <template slot-scope="scope">
                  <span style="color: Green"
                    >-{{ scope.row.amount || "暂无" }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column label="计算结果百分比" align="center" prop="moreRemarks">
                <template slot-scope="scope">
                  <span>{{ scope.row.moreRemarks || "暂无" }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="脱敏数据" name="1">
            <!-- <el-button
              size="mini"
              round
              type="primary"
              icon="el-icon-download"
              @click="ProfitExport"
              style="margin-bottom: 10px"
              >导出</el-button
            > -->
            <el-table :data="roleList">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column label="上传时间" align="center" prop="time" />
              <el-table-column label="系统ID" align="center" prop="proTime" />
              <el-table-column label="识别名称" prop="proName" align="center" />
              <el-table-column
                label="展业时间"
                prop="roleName"
                align="fromUserName"
                width="150"
              />
              <el-table-column
                label="识别号"
                prop="toUserAccount"
                align="center"
              />
              <el-table-column
                label="判断"
                prop="toUserName"
                align="center"
              />
              <el-table-column label="数值" align="center" prop="amount">
                <template slot-scope="scope">
                  <span style="color: Green"
                    >-{{ scope.row.amount || "暂无" }}</span
                  >
                </template>
              </el-table-column>
            
             
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="会员汇总数据2" name="2">
            <!-- <el-button
              size="mini"
              round
              type="primary"
              icon="el-icon-download"
              @click="otherExport"
              style="margin-bottom: 10px"
              >导出</el-button
            > -->
            <el-table :data="roleList">
              <el-table-column label="用户昵称" align="center" prop="time">
                <template slot-scope="scope">
                  <span>{{ scope.row.time || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="项目名称"
                prop="otherType"
                align="center"
                :show-overflow-tooltip="true"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.otherType || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="总数"
                prop="fromUserName"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="自定义汇总"
                prop="toUserAccount"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserAccount || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="自定义结算"
                prop="toUserName"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="自定义百分比" align="center" prop="amount">
                <template slot-scope="scope">
                  <span
                    v-show="scope.row.otherType == '平台增加'"
                    style="color: red"
                    >+{{ scope.row.amount || "0" }}</span
                  >
                  <span
                    v-show="scope.row.otherType == '平台减少'"
                    style="color: Green"
                    >-{{ scope.row.amount || "0" }}</span
                  >
                  <span
                    v-show="scope.row.otherType == 'null'"
                    >0</span
                  >
                </template>
              </el-table-column>

         




            </el-table>
          </el-tab-pane>
          <el-tab-pane v-if="true" label="团队汇总页面" name="3">
            <!-- <el-button
              size="mini"
              round
              type="primary"
              icon="el-icon-download"
              @click="otherExport"
              style="margin-bottom: 10px"
              >导出</el-button
            > -->
            <el-table :data="roleList">
              <el-table-column label="用户昵称" align="center" prop="time">
                <template slot-scope="scope">
                  <span>{{ scope.row.time || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="项目名称"
                prop="otherType"
                align="center"
                :show-overflow-tooltip="true"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.otherType || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="总数"
                prop="fromUserName"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="自定义汇总"
                prop="toUserAccount"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserAccount || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="自定义结算"
                prop="toUserName"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="自定义百分比" align="center" prop="amount">
                <template slot-scope="scope">
                  <span
                    v-show="scope.row.otherType == '平台增加'"
                    style="color: red"
                    >+{{ scope.row.amount || "0" }}</span
                  >
                  <span
                    v-show="scope.row.otherType == '平台减少'"
                    style="color: Green"
                    >-{{ scope.row.amount || "0" }}</span
                  >
                  <span
                    v-show="scope.row.otherType == 'null'"
                    >0</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <pagination
        :total="total"
        style="margin:40px 0px"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/login.js";


export default {
  data() {
    return {
       formData: {
        field102: undefined,
        field103: undefined,
        field104: undefined,
        field105: undefined,
      },
      rules: {
        field102: [],
        field103: [],
        field104: [],
        field105: [],
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      pdfUrl: "",
      // 切换佣金收入和分润收入
      activeName: "1",
      // ..提现弹窗
      centerDialogVisible: false,
      // ..提现窗口3个数据
      ruleForm: {
        money: "",
        region: "",
        date2: "",
        monetUser: "",
      },
      // ..卡片总数据
      CardData: {},
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: 0,
      // 类型搜索
      field101Options: [
      ],
      //其它搜索类型
      otherOptions: [
        {
          proName: "平台减少",
          proId: 4,
        },
        {
          proName: "平台增加",
          proId: 3,
        },
      ],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 搜索类型
        amountType: "",
        // 时间
        dateRange: "",
        //出资方
        fromUserName:"",
        field106:"",
        field104:"",
      },
      roleList: [{toUserName:"2"}],
    };
  },
  mounted() {
    // this.getuser();
  },
  methods: {
     submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    //导出的接口
    CommissionExport() {
      
    },

    ProfitExport() {},
    otherExport() {

    },

    handleClick1(tab, event) {
      // //console.log(tab, event, "2222");
      //如果切换其它就把搜索类型更改掉

      this.getList();
    },
    /** 查询角色列表 */
    async getuser() {
      const res = await getInfo();
      // //console.log(res, "用户信息");
      if (res.code == 200) {
        this.userId = res.user.userId;
        this.getList();
        this.loading = false;
      }
    },
    // 获取数据列表
    async getList() {

      // //console.log(this.activeName, "切换的值");
      // //console.log(this.queryParams, "搜索的参数");
      const param = {
        fromUserName:this.queryParams.fromUserName,   //出资方
        toUserName:this.queryParams.field106,   //用户昵称
        toUserAccount:this.queryParams.field104,   //用户账户
          
        fromUserId: this.userId, //用户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        // proId: this.activeName - 0,  //佣金  分润 其他
        beginDate: this.queryParams.dateRange[0], //创建时间
        endDate: this.queryParams.dateRange[1],
        amountType: this.activeName - 0, //佣金  分润 其他
        proName: this.queryParams.amountType, //搜索类型
      };
      const data = await selectCapPoolAccountRecordListPage(param);

      // //console.log(param, "给后端传递的数据");
      this.total = data.total;

      this.roleList = data.list.map((item) => {
        if (item.otherType == "3") {
          item.otherType = "平台增加";
        } else if (item.otherType == "4") {
          item.otherType = "平台减少";
        }
        return item;
      });

      // //console.log(data, "获取列表");

      //不用切换卡片了
      const cardParam = {
        fromUserId: this.userId, //用户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        // proId: this.activeName - 0,  //佣金  分润 其他
        beginDate: this.queryParams.dateRange[0], //创建时间
        endDate: this.queryParams.dateRange[1],
        // amountType: this.queryParams.amountType,  //搜索类型
      };

      // 获取卡片
      const card = await capPoolAccountRecordStatistics(cardParam);
      this.CardData = card;
      // //console.log(card, "获取卡片");

      //如果切换其它列表，就把搜索类型更换掉
      if (this.activeName == "2") {
        this.field101Options = this.otherOptions;
      } else {
        // 获取搜索下拉框
        const search = await getProNameList();
        this.field101Options = search;
        // //console.log(search, "搜索下拉框");
      }
    },

    // ..分页器
    handleCurrentChange(value) {
      // //console.log(value, "1");
    },
    handleSizeChange(value) {
      // //console.log(value, "2");
      this.pageSizes = value;
      // //console.log(this.pageSizes, "2");
    },
    // ..选择提现类型
    moneyType() {
      // //console.log(this.ruleForm.region, "5555555");
      // 1代表支付宝
      if (this.ruleForm.region == "1") {
        gutUserWithdrawalAccountSelectAlipay(this.ruleForm.region).then(
          (res) => {
            this.monetUser = res;
            this.ruleForm.monetUser = this.monetUser[0].id;
          }
        );
      } else {
        selectByPageNumSizeTxList({
          pageNum: 1,
          pageSize: 6,
        }).then((res) => {
          this.monetUser = res.data.list;
          //  //console.log( this.monetUser, "3333");
          this.ruleForm.monetUser = this.monetUser[0].id;
        });
        // gutUserWithdrawalAccountSelectBank("1").then((res) => {
        //   //console.log(res,'3333')
        //   this.monetUser = res;
        //   //console.log(this.monetUser[0].id);
        //   this.ruleForm.monetUser = this.monetUser[0].id;
        // });
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // ..提现按钮
    withdraw() {
      // //console.log(this.userId, "55555");
      this.centerDialogVisible = true;
      // this.$router.push({path:'/basics/myAccount'});
    },
    postSelectCapWithdrawalRecordListFun() {
      let objData = { ...this.queryParams };
      objData.userId = this.userId;
      // postSelectCapWithdrawalRecordList(objData).then((data) => {
      //   this.noticeList = data;
      //   this.loading = false;
      // });
    },

    handleClick(tab, event) {
      // //console.log(tab, event, "4444");
      // //console.log(tab.index, "4444");
      // //console.log(this.userId, "33333333333");
      // ..查询提现记录
      // getSelectCapWithdrawalRecordById(this.userId).then((res) => {
      //   //console.log(res, "结果");
      // });
      // ..提现记录列表
      if (tab.index == "3") {
        getselectByPageNumSize({
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        }).then((res) => {
          res.data.list.map((item) => {
            item.withdrawalType = "余额提现";
          });
          this.noticeList = res.data.list;
          // //console.log(res.data.list, "结果");
        });
      } else if (tab.index == "1") {
        //点击分润收入
        const data = {
          capUserWalletRecord: {
            amountType: "0",
          },
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        };
        // 获取分润收入列表
        selectCapUserWalletRecordListFy(data).then((res) => {
          // //console.log(res, "分润收入");
          this.noticeList = res.data.list;
        });
      } else if (tab.index == "0") {
        //点击佣金收入
        this.Commission();
      }

      this.postSelectCapWithdrawalRecordListFun();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // //console.log(this.queryParams, "重置按钮");
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    async handleQuery() {
      // //console.log(this.queryParams.dateRange, "时间");
      let param = {
        beginDate: this.queryParams.dateRange[0], //创建时间
        endDate: this.queryParams.dateRange[1],
        proId: this.queryParams.amountType,
        amountType: this.activeName,
      };
      const data = await selectCapPoolAccountRecordList(param);
      // //console.log(data, "搜索结果");
      this.roleList = data;
      this.total = data.length;

      const card = await capPoolAccountRecordStatistics(param);
      this.CardData = card;
      // //console.log(card, "获取卡片");

      if (this.activeName == "0") {
        // //console.log(this.queryParams, "佣金搜索按钮");
      } else if (this.activeName == "1") {
        // //console.log(this.queryParams, "分润搜索按钮");
      } else {
        // //console.log(this.queryParams, "其它搜索按钮");
      }

      // this.queryParams.pageNum = 1
    },
  },
};
</script>
<style lang='scss'>
.topDiv {
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: 20px;
  height: auto;
  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
  .containers {
    height: 130px;
    // border: 1px red solid;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
  }
}
</style>
